<!--
	新闻列表页面
	张中博
	2017.5.6
	
	
-->

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <style type="text/css">
    	.mui-table-view-chevron .mui-table-view-cell {
    		padding-right: 15px;
    	}
    </style>
</head>
<body>
    
    
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">新闻列表</h1>
    </header>
    <!--下拉刷新容器-->
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view mui-table-view-chevron" id="list">
          
        </ul>
      </div>
    </div>
    <script src="js/template-web.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    
    <script type="text/html" id="tpl-li">
		
    	<% for (var i = 0; i < 5; i++) {%>
    		<li class="mui-table-view-cell" data-href="<%= data[i].link%>" id="newsInfo">
	            <h4><%= data[i].title %></h4>
	            <p><%= data[i].desc %></p>
	        </li>
    	<%}%>
    	
    </script>
    <script type="text/javascript">
    	mui.init({
    		//下拉刷新
    		pullRefresh:{
    			container:"#refreshContainer",
    			up:{
    				
    				auto:true,
    				contentrefresh : "正在加载...",
    				contentnomore:'别扯了，没有更多数据了',
    				callback:pullRefresh
    			}
    		}
    	})
    	
    	var page = 0;
    	function pullRefresh(){
    		//通过API接口获取数据
    		page++;
    		if(page < 5){
	    		mui.get("http://route.showapi.com/109-35",{
	    			
	    			showapi_appid:36572,
	    			showapi_sign:"9e712f00a7834aed8333d551d9e42e4c",
	    			page:page
	    		},function(res){
	    			//渲染到页面
		    			if (res && res.showapi_res_code == 0) {
		    			
		    				var data = res.showapi_res_body.pagebean.contentlist;
		    			
		    				var lis = template('tpl-li', {data: data});
		    			
		    				$('#list').append(lis);
		    			
			    		} else {
			    			mui.alert(res.showapi_res_error);
			    		}
			    		
			    		mui('#refreshContainer').pullRefresh().endPullupToRefresh();
	    		},"json")
	    	}
    		else{
    			//没有数据之后底部显示“别扯了，没有更多数据了”
    			mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
    		}
    	}
    	//点击对应的新闻列表，并打开新闻详情页面
    	mui("#list").on("tap","li",function(){
    		//获得点击的新闻详情的网络地址
			var href = this.getAttribute("data-href");
			//创建自定义事件传递新闻详情的网络地址
			var newInfo = mui.preload({
				url: 'newsInfo.html',
				id: 'newsInfo'
			});
			
			mui.fire(newInfo, 'ready', {
				href: href
			})
			//打开新闻详情
			var webview = mui.openWindow({
				url: 'newsInfo.html', 
				id:'newsInfo',
				styles:{
	      			top:'0px',
		      		bottom:'0px'
		      },
//		      extras:{
//		      	href:href
//		      },
				createNew:false,
			    show:{
			      autoShow:true,
			      aniShow:"slide-in-right",    
			      event:'titleUpdate',
			      extras:{}
			    },
			    waiting:{
			      autoShow:true,
			      title:'正在加载...'
			    }
			});
		})
    
    
    </script>
    
    
    
</body>
</html>

